<template>
  <div class="content">
    <ul class="layoutLogin" v-if="this.$store.state.login === true">
      <li v-for="(login, loginIndex) in allData[3]" :key="loginIndex" @click="myOrder(loginIndex)">
        <van-icon :name="login.icon" :color="login.color" size="30"/>
        {{login.name}}
      </li>
    </ul>
    <ul class="layoutTop">
      <li v-for="(top, topIndex) in allData[0]" :key="topIndex" class="topContent" @click="capital(topIndex)">
        <div class="topTitle">
          <van-icon :name="top.icon" size="20" class="iconLeft" />
          {{top.name}}
        </div>
        <div class="topUpEmName">
          <em v-for="(child, childIndex) in top.children" :key="childIndex">
            {{child.emName}}
          </em>
        </div>
        <div class="topDownEmName">
          <em>{{top.detail}}</em>
        </div>
      </li>
    </ul>
    <ul class="layoutMid">
      <li v-for="(mid, midIndex) in allData[1]" :key="midIndex" @click="commonInformation(midIndex)">
        <em>{{mid.emName}}</em>
        {{mid.name}}
      </li>
    </ul>
    <ul class="layoutBottom">
      <li v-for="(bottom, botIndex) in allData[2]" :key="botIndex" @click="travelTools">
        <em>{{bottom.emName}}</em>
        {{bottom.name}}
      </li>
    </ul>

<!--      <ul>-->
<!--        <li>-->
<!--          钱包-->
<!--          <em>-->
<!--            礼品卡-->
<!--            现金-->
<!--            返现-->
<!--          </em>-->
<!--        </li>-->
<!--        <li>-->
<!--          优惠卷-->
<!--          <em>领券</em>-->
<!--        </li>-->
<!--        <li>-->
<!--          积分-->
<!--          <em>兑好礼</em>-->
<!--        </li>-->
<!--        <li>-->
<!--          拿去花-->
<!--          <em>-->
<!--            分期付款-->
<!--          </em>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <ul>-->
<!--        <li>-->
<!--          常用信息-->
<!--          <em>旅客/地址/发票抬头</em>-->
<!--        </li>-->
<!--        <li>-->
<!--          我的收藏-->
<!--          <em>降价产品有提醒</em>-->
<!--        </li>-->
<!--        <li>-->
<!--          浏览历史-->
<!--          <em>近15天访问记录</em>-->
<!--        </li>-->
<!--        <li>-->
<!--          我要合作-->
<!--          <em>供应商加盟/代理合作</em>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <ul>-->
<!--        <li>-->
<!--          出行工具-->
<!--          <em>翻译助手等</em>-->
<!--        </li>-->
<!--      </ul>-->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "PersonContent",
  data() {
    return {
      allData:[],
    }
  },
  mounted() {
    axios.get("data/person.json").then( res => {
      this.allData = res.data;
    })
  },
  methods: {
    myOrder(val) {
      if (val === 0) {
        this.$router.push("/myOrder");
      } else if (val === 1) {
        this.$router.push("/toBePaid");
      } else if (val === 2) {
        this.$router.push("/noTrip");
      } else if (val === 3) {
        this.$router.push("/toBeEvaluated");
      }
    },
    capital(val) {
      if (val === 0) {
        this.$router.push("/wallet");
      } else if (val === 1) {
        this.$router.push("/coupon");
      } else if (val === 2) {
        this.$router.push("/integral");
      } else if (val === 3) {
        this.$router.push("/takeTheFlowers");
      }
    },
    commonInformation(val) {
      if (val === 0) {
        this.$router.push("/comInfor");
      } else if (val === 1) {
        this.$router.push("/myCollection");
      } else if (val === 2) {
        this.$router.push("/browsingHistory");
      } else if (val === 3) {
        this.$router.push("/cooperate");
      }
    },
    travelTools() {
      this.$router.push("/travelTools")
    }
  }
}
</script>

<style scoped>
.content {
  margin: 0;
  padding: 0;
}
.layoutTop, .layoutMid, .layoutBottom, .layoutLogin {
  background: #ffffff;
  margin-bottom: 10px;
}
.topContent:nth-of-type(1) {
  line-height: 1.8;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid #efefef;
}
.topContent:nth-of-type(2), .topContent:nth-child(3), .topContent:nth-child(4) {
  width: 32.8%;
  display: inline-block;
  margin: 0;
  padding: 15px 0 0;
  height: 65px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}
.topUpEmName {
  margin-left: 25px;
}
.topUpEmName em {
  float: none;
  line-height: 1;
  color: #999999;
  margin-right: 10px;
  font-size: 13px;
}
.topUpEmName em:nth-of-type(1), .topUpEmName em:nth-of-type(2) {
  padding-right: .15rem;
  border-right: 1px solid #999999;
}
.topContent:nth-of-type(2) em, .topContent:nth-child(3) em, .topContent:nth-child(4) em{
  float: none;
  display: block;
  line-height: 1;
  margin-top: 10px;
  color: #999999;
}
.topContent:nth-of-type(2), .topContent:nth-child(3) {
  border-right: 1px solid #efefef;
}
.topTitle {
  font-size: 16px;
}
.iconLeft {
  left: 0;
  top: 4px;
}
.topDownEmName em {
  font-size: 13px;
}

.layoutMid li, .layoutBottom li {
  position: relative;
  padding: 0 25px 0 0;
  border-top: 1px solid #efefef;
  height: 49px;
  line-height: 49px;
  margin-left: 16px;
  font-size: 16px;
}
.layoutMid li em, .layoutBottom li em{
  float: right;
  font-size: 13px;
  color: #999999;
}
.layoutMid li em:after, .layoutBottom li em:after{
  position: absolute;
  right: 10px;
  top: 50%;
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border: solid #999;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(0, -50%) rotate(45deg);
  transform: translate(0, -50%) rotate(45deg);
}

.layoutLogin li{
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 15px 0;
}
.layoutLogin li i {
  display: block;
  margin: 0 auto 7px;
}
</style>